<template>
<div>
    <el-upload 
      class="el-icon-upload" 
      :on-success="handleSuccess"     
      :on-remove="handleRemove"   
      name="upload" 
      :action="uploadUrl" 
      :file-list="fileList">
      <el-button type="primary">点击上传
      </el-button>
    </el-upload>
    <!-- {{vfiles}} -->
</div>
</template>

<script>
export default {
  props: {
    vfiles: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      uploadUrl: process.env.uploadUrl,
      downloadUrl: process.env.downloadUrl,
      jiyaoMsg: [],
      fileList: []
    };
  },
  mounted() {},
  created() {
    this.JiyaoTofileList(this.vfiles);
  },
  computed: {},
  methods: {
    handleSuccess(response, file, fileList) {
      console.log("handleSuccess");
      console.log("response", response);
      console.log("file", file);
      console.log("fileList", fileList);
      this.fileListToJiyao(fileList);
      this.$emit("update:vfiles", this.jiyaoMsg);
    },
    JiyaoTofileList(res) {
      this.fileList = [];
      console.log("JiyaoTofileList", res);
      for (const v of res) {
        console.log(res);
        this.formlist = {
          name: v.name,
          ikey: v.ikey,
          qkey: v.qkey,
          url: this.uploadUrl + v.ikey
        };
        this.fileList.push(this.formlist);
      }
    },
    fileListToJiyao(fileList) {
      this.jiyaoMsg = [];
      console.log("fileListToJiyao");
      console.log(fileList);
      for (const v of fileList) {
        console.log("v", v);
        if (v.ikey) {
          console.log("v.ikey", v.ikey);
          this.form = {
            ikey: v.ikey,
            name: v.name,
            qkey: v.qkey
          };
          console.log("v.ikey. this.form", this.form);
        } else {
          this.form = {
            ikey: v.response.generateWord,
            name: v.response.fileName,
            qkey: v.response.qnGenerateWord
          };
          console.log("else.this.form", this.form);
        }
        this.jiyaoMsg.push(this.form);
        // console.log("this.jiyaoMsg", this.jiyaoMsg);
        // console.log("this.vxxx", this.vxxx);
        // this.vxxx = this.jiyaoMsg;
        // console.log("this.vxxx", this.vxxx);
      }
    },
    handleRemove(file, fileList) {
      console.log("handleRemove");
      console.log("this.vfiles", this.vfiles);
      console.log("file", file);
      console.log("fileList", fileList);
      // this.vxxx = [];
      this.jiyaoMsg = [];
      for (const v of fileList) {
        console.log("v", v);
        if (v.ikey) {
          console.log("v.ikey", v.ikey);
          this.form = {
            ikey: v.ikey,
            name: v.name,
            qkey: v.qkey
          };
          console.log("v.ikey. this.form", this.form);
        } else {
          this.form = {
            ikey: v.response.generateWord,
            name: v.response.fileName,
            qkey: v.response.qnGenerateWord
          };
          console.log("else.this.form", this.form);
        }
        // this.vxxx.push(this.form);sss
        this.jiyaoMsg.push(this.form);
        console.log("this.jiyaoMsg", this.jiyaoMsg);
      }
      this.$emit("update:vfiles", this.jiyaoMsg);
      console.log("this.vfiles", this.vfiles);
    }
  },
  watch: {
    //   result(val) {
    //    this.myFileList3 = val;//新增myFileList3的watch，监听变更并同步到myResult上
    //  },
    //  myFileList3(val){
    //     this.$emit("on-fileList3-change",val);//③组件内对myResult变更后向外部发送事件通知
    //  }
    vfiles(curVal, oldVal) {
      console.log("watch.vfiles", curVal, oldVal);
      if (curVal != oldVal) {
        // this.orgTreeInit();
        this.JiyaoTofileList(curVal);
      }
    }

    //this.JiyaoTofileList(this.vxxx);
  }
};
</script>


